<script lang="ts" setup>
import {ref} from 'vue'
const params = ref({
    pagenum:1,
    pagesize:10
})
const userList = ref([])
const total = ref(0)
const handleSizeChange = ()=>{

}
const handleCurrentChange = ()=>{

}
</script>

<template>
   <div class="wrapped">
    
       <div class="wrapped-content">
          <div class="select">
            <div class="input">
            <el-form-item>
                <el-input placeholder="输入出库编号进行搜索"  suffix-icon="Search"/>
            </el-form-item>
             <el-form-item>
                <el-button type="primary">搜索</el-button>
            </el-form-item>
            <el-form-item>
               <el-button type="primary">重置</el-button>
            </el-form-item>
            </div>
          </div>
             <el-table :data="userList" border  style="width: 100%">
             <el-table-column prop="date" align="center" label="序号" width="80" />
             <el-table-column prop="name" align="center" label="申请出库编号" width="200" />
              <el-table-column prop="date" align="center" label="产品名称" width="100" />
             <el-table-column prop="name" align="center" label="申请出库数量" width="150" />
              <el-table-column prop="date" align="center" label="申请出库总价" width="200" />
              <el-table-column prop="date" align="center" label="申请人" width="100" />
              <el-table-column prop="date" align="center" label="申请出库时间" width="200" />
              <el-table-column prop="date"  align="center" label="审核人" width="100" />
              <el-table-column prop="date" align="center" label="审核时间" width="100" />
              <el-table-column prop="date" align="center" label="审核状态" width="100" />
              <el-table-column prop="date" align="center" label="申请出库备注" width="200" />
              <el-table-column prop="date" align="center" label="审核备注" width="200" />
             <el-table-column prop="address" align="center" fixed="right" label="操作" />
             <template #empty>
            <el-empty description="暂无数据" />
            </template>
             </el-table>       
            <el-pagination
                v-model:current-page="params.pagenum"
                v-model:page-size="params.pagesize"
                :page-sizes="[5, 10, 20, 30]"
                :background="true"
                layout="jumper,total, sizes, prev, pager, next, "
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="float: right; margin: 10px 0;"

            />

   </div> 
    
   </div>
</template>

<style lang="scss" scoped>
.wrapped{
.wrapped-content{
    height: 600px;
    padding: 0 10px;
    .select{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .input{
            display: flex;
            justify-content: flex-start;
            .el-input,.el-select{
              width: 200px;
              margin-right: 10px;
            }
            .el-button{
                margin-right:10px ;
            }
        }

    }
}
}
</style>